<template>
  <view class="container" style="position: relative;">
    <cu-custom bgColor="bg-blue" :isBack="true">
      <block slot="content">{{name}}</block>

    </cu-custom>
    <view class="qrcodeModal bg-white">
      <u-search :showAction="true" v-model="searchOrderNum" placeholder="请输入订单编号" actionText="搜索" @search="search" :animation="true"></u-search>
    </view>
    <view class="qrcodeModal2">
      <image mode="widthFix" src="/static/qrcode.png" style="width: 100%;"></image>
      <view class="qrcodeText">扫描二维码/条形码</view>
    </view>
    <view class="padding padding-top-xs">
      <view v-if="false">
        <view>
          <view class="modelShowTitle">订单编号</view>
          <view class="modelInput">
            <input type="text" v-model="orderNum" readOnly placeholder="扫码显示订单编号" placeholder-class="inputPlace" />
          </view>
        </view>
      </view>
      <scroll-view scroll-y="true" style="max-height: calc(100vh - 420rpx);padding-top: 24rpx;">
        <view class="dateItem" v-for="(item,index) in searchList" @click="setPoup(item)" :key="index" v-if="index<100">
          <view class="headBox flex justify-between align-center">
            <view class="title">{{item.name}}</view>
            <view class="flex align-center">
              <view class="date margin-right">{{$ComFunJS.getNowDate('yyyy-MM-dd HH:mm:ss',item.time)}}</view>
              <u-icon name="checkmark-circle-fill" size="20" v-if="item.res&&item.res.code==200" color="green"></u-icon>
              <u-icon name="close-circle-fill" size="20" color="red" v-else></u-icon>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <u-notify ref="uNotify"></u-notify>
    <u-popup :show="poupShow" mode="bottom" @close="poupShow = false">
      <view class="padding-xs" style="padding-top: 40prx;padding-bottom: 80rpx;width: 100%;">
        <view class="flex align-center" style="width: 100%;">
          <text>订单编号：{{modelItem.name}}</text>
        </view>
        <view class="flex align-center margin-top" style="width: 100%;">
          <text>扫码时间：{{$ComFunJS.getNowDate('yyyy-MM-dd HH:mm:ss',modelItem.time)}}</text>
        </view>
        <view class="margin-top" v-if="modelItem.res">
          <text>扫码结果：{{modelItem.res.code==200?'成功':'失败'}}</text>
        </view>
        <view class="margin-top" v-if="modelItem.res">
          <text>结果描述：{{modelItem.res.msg}}</text>
        </view>
        <view class="margin-top" v-if="modelItem.user">
          <text>操作人：{{modelItem.user}}</text>
        </view>
        <view class="margin-top" v-if="modelItem.res">
          <text>条码内容：{{JSON.stringify(modelItem.res)}}</text>
        </view>
      </view>
    </u-popup>
    <view style="width: 100%;position: fixed;
    bottom: 100rpx;" class="flex align-center justify-center">
      <image src="/static/tab/icon_sao.png" style="width: 180rpx;" mode="widthFix" @click="setSaoMa"></image>
    </view>
    <view class="fixedBtn" @click="show = true">
      <image src="/static/icon/bhIcon.png" mode="widthFix" style="width: 40rpx;"></image>
      <view style="font-size: 28rpx;
          margin-top: 3rpx;
    font-weight: 500;
    color: rgba(85, 92, 105, 1);">
        输入
      </view>
    </view>
    <u-popup :show="show" mode="bottom" @close="close" @open="open">
      <view class="aginPoup">
        <view class="textModel">
          输入订单编号
          <image src="/static/icon/close.png" @click="show = false" style="position: absolute;right: 40rpx;width: 22rpx;top:12rpx" mode="widthFix"></image>
        </view>
        <view class="flex justify-center" style="padding-top: 76rpx;">
          <view class="inputBox">
            <input type="text" v-model="orderNum" placeholder="请输入订单编号" class="text-center" style="font-size:28rpx;font-weight:400;color: rgba(0, 0, 0, 1);">
          </view>
        </view>
        <view class="padding-lr">
          <view class="ktSumbit" @click="inputSumbit()">
            确认提交
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex';
  export default {
    components: {},
    data() {
      return {
        code: null,
        show: false,
        name: '',
        searchOrderNum: '',
        orderNum: '',
        historyList: [],
        searchList: [],
        TTSSpeech: null,
        modelItem: {},
        poupShow: false,
      };
    },
    onPageScroll(e) {},
    onReady() {},
    onLoad(option) {
      if (option.code) {
        this.code = option.code;
        this.name = option.desc
      }
    },
    onShow() {
      this.getALLData()
    },
    computed: {
      ...mapState(['userInfo'])
    },
    methods: {
      getALLData() {
        this.$ComFunJS.getStorage(`qrcode_${this.code}`).then((res) => {
          if (res) {
            let list = JSON.parse(res)
            this.historyList = [...list];
            this.searchList = this.fuzzySearch(this.historyList, 'name', this.searchOrderNum)
          }
        })
      },
      search() {
        this.searchList = this.fuzzySearch(this.historyList, 'name', this.searchOrderNum)
      },
      fuzzySearch(array, fieldName, keyword) {
        if (!array || !fieldName) return [];

        const result = [];
        const lowerKeyword = keyword.toLowerCase();

        for (const item of array) {
          const value = item[fieldName];
          if (value !== null && value !== undefined) {
            const str = value.toString().toLowerCase();
            if (str.includes(lowerKeyword)) {
              result.push(item);
            }
          }
        }
        return result;
      },
      inputSumbit() {
        if (!this.orderNum) {
          this.$api.msg('请输入订单编号~')
          return
        }
        this.setOrderNum(this.orderNum)
        this.show = false;
        this.orderNum = ''
      },
      setPoup(item) {
        this.modelItem = { ...item };
        this.poupShow = true
      },
      setSaoMa(e) {
        uni.scanCode({
          scanType: ['barCode', 'qrCode'], //扫码类型 
          autoZoom: true, //是否启用自动放大，默认启用
          success: (res) => {
            this.setOrderNum(res.result)
          }
        });
      },
      setLocation(e, res) {
        var timestamp = Date.parse(new Date());
        let label = { name: e, time: timestamp, res: res, user: this.userInfo.userName }
        this.historyList.unshift(label)
        this.searchList = this.fuzzySearch(this.historyList, 'name', this.searchOrderNum)
        this.$ComFunJS.setCookie(`qrcode_${this.code}`, JSON.stringify(this.historyList))
      },
      setOrderNum(e) {
        this.orderNum = e;
        if (e.includes('|')) {
          this.updateOrderProductStatus(e)
        } else {
          this.orderStatusUpdata(e)
        }
      },
      //整个
      orderStatusUpdata(e) {
        this.$ComFunJS.ajax({
          method: 'post',
          data: {
            orderNo: e,
            currentStatus: this.code,
          },
          url: "/system/wechat/scan/orderStatusUpdata",
          success: (res) => {
            uni.hideLoading()
            this.setLocation(e, res)
            if (res.code == 200) {
              this.orderNum = ''
              this.$refs.uNotify.show({
                top: 0,
                type: 'success',
                color: '#fff',
                message: '订单状态更新成功',
                duration: 1000 * 3,
                fontSize: 14,
                safeAreaInsetTop: true
              })
              // this.speech(`${this.name}成功`)
            } else {
              this.$refs.uNotify.show({
                top: 0,
                type: 'error',
                color: '#fff',
                message: res.msg ? res.msg : '操作失败',
                duration: 1000 * 5,
                fontSize: 14,
                safeAreaInsetTop: true
              })
            }
          }
        })
      },
      //单个
      updateOrderProductStatus(e) {
        this.$ComFunJS.ajax({
          method: 'post',
          data: {
            orderNo: e.split('|')[0],
            currentStatus: this.code,
            seq: e.split('|')[1]
          },
          url: "/system/wechat/scan/updateOrderProductStatus",
          success: (res) => {
            uni.hideLoading()
            this.setLocation(e, res)
            if (res.code == 200) {
              this.orderNum = ''
              this.$refs.uNotify.show({
                top: 0,
                type: 'success',
                color: '#fff',
                message: '订单状态更新成功',
                duration: 1000 * 3,
                fontSize: 14,
                safeAreaInsetTop: true
              })
              // this.speech(`${this.name}成功`)
            } else {
              this.$refs.uNotify.show({
                top: 0,
                type: 'error',
                color: '#fff',
                message: res.msg ? res.msg : '操作失败',
                duration: 1000 * 5,
                fontSize: 14,
                safeAreaInsetTop: true
              })
            }
          }
        })
      }
    },
  }
</script>

<style lang="scss">
  page {
    background: #F5F6F7;
  }

  .aginPoup {
    width: 100%;
    height: 514rpx;
    padding-top: 30rpx;

    .textModel {
      position: relative;
      font-size: 32rpx;
      text-align: center;
      font-weight: 500;
      color: rgba(0, 0, 0, 1);
    }

    .inputBox {
      width: 576rpx;
      height: 72rpx;
      opacity: 1;
      border-radius: 8rpx;
      background: rgba(245, 246, 247, 1);
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .ktSumbit {
    width: 100%;
    height: 96rpx;
    opacity: 1;
    border-radius: 12rpx;
    background: rgba(18, 96, 252, 1);
    font-size: 32rpx;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(255, 255, 255, 1);
    margin-top: 100rpx;

    &.change {
      background: rgba(18, 96, 252, .3);
      color: rgba(62, 126, 230, 1);
    }
  }

  .fixedBtn {
    width: 80rpx;
    padding: 17rpx 0;
    opacity: 1;
    border-radius: 50rpx;
    position: fixed;
    right: 26rpx;
    display: felx;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    bottom: 200rpx;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 2rpx 10rpx 4rpx rgba(2, 47, 87, 0.08);
  }

  .modelShowTitle {
    font-size: 32rpx;
    font-weight: 500;
    color: rgba(49, 55, 64, 1);
    margin-bottom: 12rpx;
  }

  .inputPlace {
    color: rgba(0, 0, 0, 0.5);
  }

  .modelInput {
    width: 100%;
    height: 96rpx;
    background: rgba(165, 168, 173, .08);
    border-radius: 12rpx;
    min-height: 48px;
    padding: 14rpx;
    display: flex;
    align-items: center;

    input {
      width: 100%;
      color: #2a2a2a;
      background: none;
      border: none;
    }
  }

  .qrcodeModal2 {
    padding: 30upx 160upx;
    position: absolute;
    width: 100%;
    top: 300rpx;
    opacity: .2;

    .qrcodeText {
      position: relative;
      font-size: 28upx;
      font-weight: 500;
      letter-spacing: 0px;
      line-height: 28.96px;
      color: rgba(41, 63, 102, 1);
      text-align: center;
      top: -100upx;
    }
  }

  .qrcodeModal {
    padding: 30upx;
    width: 100%;

    .qrcodeText {
      position: relative;
      font-size: 40upx;
      font-weight: 500;
      letter-spacing: 0px;
      line-height: 28.96px;
      color: rgba(41, 63, 102, 1);
      text-align: center;
      top: -100upx;
    }

    .qrcodeIntro {
      font-size: 28upx;
      position: relative;
      font-weight: 400;
      color: rgba(154, 165, 184, 1);
      text-align: center;
      top: -90upx
    }
  }

  .qrcodeButton {
    width: 100%;
    height: 96upx;
    opacity: 1;
    border-radius: 122upx;
    background: linear-gradient(180deg, rgba(18, 96, 252, 1) 0%, rgba(38, 129, 255, 1) 100%);
    box-shadow: 0px 17upx 51upx rgba(233, 239, 245, 1);
    text-align: center;
    font-size: 28upx;
    color: #fff;
    line-height: 96upx;
    letter-spacing: 2upx;
  }

  .u-modal__content {
    flex-direction: column !important;
  }

  .cancleBtn {
    width: 260.62upx;
    height: 80upx;
    opacity: 1;
    border-radius: 12rpx;
    background: rgba(0, 0, 0, 0.05);
    font-size: 32upx;
    font-weight: 500;
    letter-spacing: 6px;
    color: rgba(49, 55, 64, 1);

    &.sumbit {
      background: linear-gradient(180deg, rgba(18, 96, 252, 1) 0%, rgba(38, 129, 255, 1) 100%);
      color: #FFFFFF;
    }
  }

  .dateItem {
    width: 100%;
    opacity: 1;
    border-radius: 16rpx;
    background: rgba(255, 255, 255, 1);
    padding: 0 30rpx;
    margin-top: 16rpx;

    .headBox {
      border-bottom: 1px solid rgba(154, 165, 184, 0.11);
      padding: 20rpx 0;
    }

    .title {
      font-size: 28rpx;
      font-weight: 500;
      color: rgba(49, 55, 64, 1);
      text-align: left;
    }

    .date {
      font-size: 24rpx;
      font-weight: 400;
      color: rgba(130, 132, 135, 1);
      text-align: left;
    }

    .allPrice {
      font-size: 34rpx;
      font-weight: 700;
      color: rgba(18, 96, 252, 1);
    }

    .price {
      font-size: 32rpx;
      font-weight: 400;
      color: rgba(130, 132, 135, 1);
    }
  }
</style>